<!DOCTYPE html>
<head>
    <style>
        .ball-container {
            position: absolute;
            width: 200px;
            height: 400px;
        }
        .box {
            position: absolute;
            left: 300px;
            width: 200px;
            height: 200px;
            background-color: blue;
            border-radius: 10px;
        }
        #box1 {
            top: 50px;
        }
        #box2 {
            top: 300px;
        }

        #box3 {
            position: absolute;
            left: 550px;
            width: 200px;
            height: 200px;
            top: 50px;
            overflow: hidden;
        }
        #box3-inner {
            width: 200px;
            height: 450px;
            background-color: blue;
            border-radius: 10px;
        }

        #box4 {
            height: 50px;
            top: 600px;
            left: 50px;
        }
    </style>
</head>
<body>
<svg viewBox="0 0 100 200" class="ball-container">
    <circle id="ball0" class="ball" cx="50" cy="50" r="50" fill="rgb(220, 105, 105)"></circle>
    <circle id="ball1" class="ball" cx="50" cy="40" r="40" fill="rgb(200, 90, 90)"></circle>
    <circle id="ball2" class="ball" cx="50" cy="30" r="30" fill="rgb(180, 75, 75)"></circle>
    <circle id="ball3" class="ball" cx="50" cy="20" r="20" fill="rgb(160, 60, 60)"></circle>
    <circle id="ball4" class="ball" cx="50" cy="10" r="10" fill="rgb(140, 45, 45)"></circle>
    <rect x="0" y="197" width="100" height="3" fill="black"></rect>
</svg>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div id="box3">
    <div id="box3-inner"></div>
</div>
<div class="box" id="box4"></div>
<script>
    for (let i = 0; i < 5; i++) {
        const ball = document.getElementById(`ball${i}`);
        ball.animate([
            { transform: "translateY(0px)" },
            { transform: `translateY(${100 + 20 * i}px)` },
            { transform: "translateY(0px)" },
        ], {
            duration: 1000,
            iterations: Infinity,
            easing: "ease-in-out"
        });
    }

    box1.animate({ backgroundColor: ["red"] }, {
        duration: 2000,
        iterations: Infinity,
        direction: "alternate"
    });

    box2.animate({ opacity: [0] }, {
        duration: 2000,
        iterations: Infinity,
        direction: "alternate",
    });

    // Discrete property animation
    box3.animate({ overflow: ["visible"] }, {
        duration: 2000,
        iterations: Infinity,
        direction: "alternate",
    });

    box4.animate([
        { transform: "none" },
        { transform: "translateX(400px) rotate3d(1, 1, 0, 50deg)" },
    ], {
        duration: 2000,
        iterations: Infinity,
        direction: "alternate"
    });
</script>
</body>
